<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{$header['title']}}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<link rel="stylesheet" href="/../extend/smartybuilder/libs/Templates/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">-->
    <meta name="keywords" content="{{$header['keywords']}}" />
    <meta name="description" content="{{$header['description']}}" />
    <link rel="stylesheet" href="{{$path}}/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="{{$path}}/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <link rel="stylesheet" href="{{$path}}/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form" action="{{$action}}" method="post" enctype="multipart/form-data">
            {{foreach $form as $key=>$value}}
            {{include file=$value['type']}}
            <!--<idv>{{$key}}</idv>-->
            {{/foreach}}
            <div class="layui-form-item">
                <div class="layui-input-block">
                    {{foreach $button as $value}}
                    {{if $value['type']=='submit'}}
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    {{else}}
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    {{/if}}
                    {{/foreach}}
                </div>
            </div>
        </form>
    </div>
</div>
<script src="{{$path}}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="{{$path}}/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="{{$path}}/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script src="{{$path}}/fuwenben/ueditor.config.js"></script>

<script src="{{$path}}/fuwenben/ueditor.all.js"></script>
<script src="{{$path}}/js/ChaJian.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    $(function () {
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "400px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "api/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            // dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });
    })
    layui.use(['form', 'layedit', 'laydate','tree','colorpicker'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ,tree = layui.tree
            ,colorpicker = layui.colorpicker;

        //日期
//开启全功能

        //创建一个编辑器
        layedit.set({
            uploadImage:{
                url:"{{$editorfileapi}}",
                type:'post'
            }
        })
        // var editIndex = layedit.build('editor');
        var intsr = 'str';
        {{foreach $form as $key=>$value}}
            {{if $value['types']=='editor'}}
            var {{$value['name']}} = UE.getEditor('{{$value['name']}}');
        {{$value['name']}}.ready(function () {
            {{$value['name']}}.setContent('{{$value['value']}}');
            })
            {{/if}}
            {{if $value['types']=='time'}}
                {{if $value['radio_value']==1}}
                laydate.render({
                    elem: '#{{$value['name']}}',
                    type:'date'
                });
                {{else}}
                laydate.render({
                    elem: '#{{$value['name']}}',
                    type:'datetime'
                });
                {{/if}}
            {{/if}}
                {{if $value['types']=='tree'}}
                //console.log(eval('('+'{{$value['option']}}'+')'));
                var {{$value['name']}}s = tree.render({
                    elem: '#{{$value['name']}}'  //绑定元素
                    ,showCheckbox:true
                    ,id:'{{$value['key_value']['value']}}'
                    ,data: eval('('+'{{$value['option']}}'+')')
                    ,oncheck:function(obj) {
                        var shuju = {{$value['name']}}s.getChecked();
                    $("[name={{$value['name']}}]").val(JSON.stringify(shuju))
                }
                });
                {{/if}}
                    {{if $value['types']=='linkselect'}}
                    form.on('select({{$value["name"]}})',function(obj){
                    console.log(obj);
                    // console.log($(this).attr('data-action'))
                        var action = obj.elem.dataset.action;//请求地址
                        var radio_value = obj.elem.dataset.radio;//是否一维数组
                        var valuename = obj.elem.dataset.valuename;//二维数组值的值的键位
                        var showname = obj.elem.dataset.showname;//二维数组显示的键位
                        var names = obj.elem.dataset.quanname;
                        var name = obj.elem.dataset.name;
                        names = names.split(',')
                        $.each(names,function(i,v){
                            if(v==name){
                                if(names[i+1]){
                                    var ids = names[i+1];
                                    var newobj = {};
                                    newobj[name] = obj.value;
                                    $.post(action,newobj,function(env){
                                  console.log(env);
                                  $('#'+ids).empty();
                                        $('#'+ids).append(new Option('请选择',''))
                                  if(env.code==200){
                                      var shuju = env.data;
                                      $.each(shuju,function(is,vs){
                                          if(radio_value==1){
                                              $('#'+ids).append(new Option(vs,vs))
                                      }else{
                                              $('#'+ids).append(new Option(vs[showname],vs[valuename]))
                                      }
                                      })
                                      layui.form.render('select')
                                    }else{
                                      layer.msg('请求数据错误');
                                    }
                                })
                            }
                        }
                    })

                })
                    {{/if}}
                        {{if $value['types']=='color'}}
                        colorpicker.render({
                            elem: '#{{$value["name"]}}'
                            ,color: '{{$value["value"]}}'
                            ,format: 'rgb'
                            ,predefine: true
                            ,alpha: true
                            ,done: function(color){
                                $('#{{$value["name"]}}-input').val(color); //向隐藏域赋值
                                // layer.tips('给指定隐藏域设置了颜色值：'+ color, this.elem);

                                color || this.change(color); //清空时执行 change
                            }
                            ,change: function(color){
                                //给当前页面头部和左侧设置主题色
                                $('.header-demo,.layui-side .layui-nav').css('background-color', color);
                            }
                        });
                        {{/if}}
                            {{if $value['types']=='json'}}
                            var newshu = eval('('+$("#json").text()+')');
                        console.log(newshu)
                                var jiedian = $("#{{$value['name']}}ss").children('div');
                                console.log(jiedian)
                                $.each(jiedian,function(i,v){
                                    if(i!==0){
                                      var newjiedian = $(v).find('input');
                                      $.each(newjiedian,function(is,vs){
                                       if(is==0){
                                       $(vs).val(newshu.key[i-1]);
                                      }else{
                                           $(vs).val(newshu.value[i-1]);
                                      }
                                    })
                                     console.log(newjiedian)
                                   // $(v).childrens('input')
                                }
                        })
                            {{/if}}
        {{/foreach}}
        //自定义验证规则
        // form.verify({
        //     title: function (value) {
        //         if (value.length < 5) {
        //             return '标题至少得5个字符啊';
        //         }
        //     }
        //     , pass: [
        //         /^[\S]{6,12}$/
        //         , '密码必须6到12位，且不能出现空格'
        //     ]
        //     , content: function (value) {
        //         layedit.sync(editIndex);
        //     }
        // });

        //监听指定开关
        // form.on('switch(switchTest)', function (data) {
        //     layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
        //         offset: '6px'
        //     });
        //     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        // });

        //监听提交
        // form.on('submit(demo1)', function (data) {
        //     layer.alert(JSON.stringify(data.field), {
        //         title: '最终的提交信息'
        //     })
        //     return false;
        // });

        //表单初始赋值
        form.val('example', {
            "username": "贤心" // "name": "value"
            , "password": "123456"
            , "interest": 1
            , "like[write]": true //复选框选中状态
            , "close": true //开关状态
            , "sex": "女"
            , "desc": "我爱 layui"
        })
    });
//添加json节点
    function tianjiajsons(obj,strs) {
        console.log(obj);
        var newshuju = $(obj).parent().parent().parent();
        var str = '<div>\n' +
            '        <div class="layui-inline">\n' +
            '            <label class="layui-form-label"></label>\n' +
            '            <div class="layui-input-inline">\n' +
            '                <input type="text" name="'+strs+'[key][]"  autocomplete="off" class="layui-input">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="layui-inline">\n' +
            '            <!--<label class="layui-form-label">验证邮箱</label>-->\n' +
            '            <div class="layui-input-inline">\n' +
            '                <input type="text" name="'+strs+'[value][]"  autocomplete="off" class="layui-input">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="layui-inline">\n' +
            '            <div class="layui-btn" onclick="shanchujsons(this)">-</div>\n' +
            '        </div>\n' +
            '    </div>';
        newshuju.append(str);
    }
    //删除json节点
    function shanchujsons(obj) {
        console.log(obj);
        var newshuju = $(obj).parent().parent();
        newshuju.remove();
    }


    function upimgs(obj,action) {
        console.log(obj)
        console.log(action)
        var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        ChaJian.upFile($(obj),action,function (res) {

            console.log(res);

            layer.close(index);

            if(res.code==200){

                layer.msg(res.msg);
                var zhi = $(obj).next().val();
                if(zhi){
                    zhi = zhi.split('|');
                }else{
                   zhi = new Array();
                }

                var str = '';

                $.each(res.data,function (i,v) {
                    console.log(v);
                    str +='<div class="layui-input-inline" style="margin-left: 5px">'+
                        '<img src="'+v.path+'" style="height:200px;width: 200px">'+
                        '<div class="zhong">'+
                        '<input style="" type="button" onclick="shanchuimg(\''+v.path+'\',this)" class="layui-btn layui-btn-sm layui-btn-danger" value="删除">'+
                    '</div>'+
                    '</div>';

                    zhi.push(v.path);

                })
                console.log(str)
                $(obj).parent().next().append(str)
                zhi = zhi.join('|');
                $(obj).next().val(zhi)

            }else{

                layer.msg(res.msg);

            }

        })
    }
    function upimg(obj,action) {
        var newobj = $(obj).parent().next();
        // console.log(newobj);
        // return
        var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        ChaJian.upFile($(obj),action,function (res) {

            console.log(res);

            layer.close(index);

            if(res.data.length>=1){

                layer.msg('上传成功');
                $(obj).next().val(res.data[0].path);

                var str = '<div class="layui-input-inline">\n' +
                    '                <img src="'+res.data[0].path+'" style="height: 200px">\n' +
                    '            </div>';
                $(obj).parent().next().empty();
                console.log(str)
                $(obj).parent().next().append(str)
            }else{

                layer.msg(res.msg);

            }

        })
    }
    function shanchuimg (id,obj) {
        console.log(id)
        console.log(obj);
        var zhi = $(obj).parents('.blocks').prev().children('.zhi').val();
        console.log(zhi);
        if(zhi){
            zhi = zhi.split('|');
            var newzhi = new Array();
            $.each(zhi,function (i,v) {
                if(v!==id){
                    newzhi.push(v);
            }
            })
            newzhi.join('|');
            console.log(newzhi);
            $(obj).parents('.blocks').prev().children('.zhi').val(newzhi)
        }
        $(obj).parent().parent().remove();

    }


</script>

</body>
</html>